<template>
	<view class="welcome">
		<view class="swiper">
			<swiper class="swiper" @animationfinish="animationfinish" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item @click="showDetail">
					<image lazy-load="true"  src="https://weizong.file.cxbyi.com/images/welcome1.jpeg" mode="widthFix" class="swiper"></image>
				</swiper-item>
				<swiper-item @click="showDetail">
					<image lazy-load="true"  src="https://weizong.file.cxbyi.com/images/welcome2.jpeg" mode="widthFix" class="swiper"></image>
				</swiper-item>
				<swiper-item @click="showDetail">
					<image lazy-load="true"  src="https://weizong.file.cxbyi.com/images/welcome3.jpeg" mode="widthFix" class="swiper"></image>
				</swiper-item>
			</swiper>					
		</view>
		<view class="menu" :style="{'zIndex':zIndex}">
			<view class="menu-bg" :animation="animationDataBig">
				<image lazy-load="true"  src="../../static/images/menu_1.png" class="menu-bg-img"></image>
			</view>
			<view class="menu-list" :animation="animationData">
				<!-- <image lazy-load="true"  src="../../static/images/menu-2.png" class="menu-list-img"></image> -->
				<view class="online" @click="onLine"></view>
				<view class="underline" @click="underLine"></view>
				<view class="share" @click="shareBox"></view>
				<view class="lottery" @click="goLottery"></view>
				<view class="user" @click="goUser"></view>
				<view class="company" @click="goCompany"></view>
			</view>
		</view>
		<view class="open" @click="showMenu">
			<view class="text">{{text}}</view>
		</view>
		<view class="cover" v-if="showCover"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 indicatorDots: false,
				 autoplay: true,
				 interval: 5000,
				 duration: 500,
				 current:0,
				 text:"-",
				 animationData:{},
				 animationDataBig:{},
				 rotateStu:false,
				 rotateDeg:0,
				 bigDeg:"-45",
				 smDeg:"0",
				 isAnimation:true,
				 showCover:false,
				 zIndex:99
			}
		},
		onLoad() {
			//调用动画api接口
			var animation = uni.createAnimation({
			  duration: 600,
			  timingFunction: "linear",
			  delay: 0,
			  transformOrigin:"70% 70% 0"
			});
			var animationBig = uni.createAnimation({
			  duration: 600,
			  timingFunction: "linear",
			  delay: 0,
			  transformOrigin:"50% 50% 0"
			});
			this.animation = animation;
			this.animationBig = animationBig;
			setTimeout(function(){
				this.animation.rotate(-180).step();
				this.animationData = this.animation.export();
			}.bind(this),1000);
			
			setTimeout(function(){
				this.animationBig.rotate(-225).step();
				this.animationDataBig = this.animationBig.export();
				setTimeout(function(){
					this.text="+";
					this.rotateStu = true;
					this.rotateDeg = 1;
					this.bigDeg = this.bigDeg - 180;
					this.smDeg = this.smDeg - 180;
					this.isAnimation = false;
					this.zIndex=-1;
				}.bind(this),500);
			}.bind(this),1000);
		},
		onUnload() {
			this.animationData = {};
			this.animationDataBig = {};
		},
		methods: {
			animationfinish(e){
				this.current = e.detail.current
			},
			showDetail(){
				var self = this;
				uni.showModal({
				    title: '提示',
				    content: '点击了第'+(parseInt(self.current)+1)+'张图片，查看详情功能正在开发中',
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			showMenu(){
				var self = this;
				if(self.isAnimation) return;
				self.isAnimation = true;
				self.bigDeg = self.bigDeg - 180;
				self.smDeg = self.smDeg - 180;
				if(self.rotateStu){
					if(self.rotateDeg==1){
						this.showCover = true;
						self.rotateStu = false;
						this.zIndex=99;
						this.animationBig.rotate(self.bigDeg).step();
						this.animationDataBig = this.animationBig.export();
						
						this.animation.rotate(self.smDeg).step();
						this.animationData = this.animation.export();
						setTimeout(function(){
							this.text="-";
							this.rotateStu = true;
							self.rotateDeg = 0;
							self.isAnimation = false;
							
						}.bind(this),800);
					}
					if(self.rotateDeg==0){
						self.rotateStu = false;
						this.showCover = false;
						this.animation.rotate(self.smDeg).step();
						this.animationData = this.animation.export();
						
						this.animationBig.rotate(self.bigDeg).step();
						this.animationDataBig = this.animationBig.export();
						setTimeout(function(){
							this.text="+";
							this.rotateStu = true;
							self.rotateDeg = 1;
							self.isAnimation = false;
							this.zIndex=-1;
						}.bind(this),800);
						
						// setTimeout(function(){
							
						// }.bind(this),700);
						
					}
				}
			},
			onLine(){
				uni.redirectTo({
				    url: '../index/index'
				});
			},
			underLine(){
				uni.redirectTo({
				    url: '../shop/shop'
				});
			},
			shareBox(){
				uni.redirectTo({
				    url: '../share/share'
				});
			},
			goLottery(){
				uni.showModal({
				    title: '提示',
				    content: '该功能正在紧急开发中~',
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
				// uni.redirectTo({
				//     url: ''
				// });
			},
			goUser(){
				uni.redirectTo({
				    url: '../main/main'
				});
			},
			goCompany(){
				uni.redirectTo({
				    url: '../about-us/about-us'
				});
			}
		},
		created() {
			
		}
	}
</script>

<style>
@import url("welcome.css");
</style>
